<template>
  <div>
    <ul>
      <!--在浏览器中最终生成的li标签是没有链接跳转的，这时在下面嵌套一个a标签浏览器渲染后router-link上的to路径将会被添加到a的herf属性上-->
      <!--<router-link to="/about" exact tag="li">-->
        <!--<a>study</a>-->
      <!--</router-link>-->
      <!--<router-link to="/about/work" tag="li">-->
        <!--<a>work</a>-->
      <!--</router-link>-->
      <!--<router-link to="/about/hobby" tag="li">-->
        <!--<a>hobby</a>-->
      <!--</router-link>-->
      <!--使用路由名称定义目标路由-->
      <router-link :to="{name:'About'}" exact tag="li">
        <a>study</a>
      </router-link>
      <router-link :to="{name:'Work'}" tag="li">
        <a>work</a>
      </router-link>
      <router-link :to="{name:'Hobby'}" tag="li">
        <a>hobby</a>
      </router-link>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
    export default{
      name: 'about'
    }
</script>
<style>
  ul{
    display: flex;
    list-style: none;
    align-items: center;
  }
  ul li{
    flex-grow: 1;
  }
</style>
